{% extends 'base.html' %}
{% block title %}PV{% endblock %}
{% block nav-itemed-5 %}layui-nav-itemed{% endblock %}
{% block nav-itemed-5-3 %}layui-this{% endblock %}
{% block context %}
<span class="layui-breadcrumb" lay-separator="-">
    <a href="{% url 'index' %}">首页</a>
    <a href="">存储与配置</a>
    <a href="{% url 'pvc' %}">PVC</a>
</span>
<hr class="layui-border-green">
<hr>
<div class="layui-card">
    <div class="layui-card-header"><span style="color: #009f95;font-weight: bold">PersistentVolumeClaim</span></div>
    <div class="layui-card-body">
        {% csrf_token %}
        <div class="layui-row">
            <div class="layui-col-md12">
                <!--  头部工具栏，左侧 -->
                <script type="text/html" id="toolBar">
                    <div class="layui-btn-container">
                        <input type="text" id="pvcName" lay-verify="title" placeholder="请输入名称" class="layui-input" style="width: 170px;height: 35px;font-size: 15px;color: black;float: left;background: white;margin-top: 7px">
                        <button class="layui-btn" id="searchBtn" style="float: left;margin-left: 5px;margin-top: 2px">搜索</button>
                    </div>
                </script>
            </div>
            <div class="layui-col-md12">
                    <table id="tt" lay-filter="tt"></table>
                    <!--  行工具 -->
                    <script type="text/html" id="bar">
                      <a class="layui-btn layui-btn-xs" lay-event="yaml">YAML</a>
                      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
            </div>
        </div>
    </div>
</div>
{% endblock %}
<!-- JS -->
{% block custom_js %}
<script>
var ns_storage = window.sessionStorage;
namespace = ns_storage.getItem('namespace');
layui.use('table', function(){
table = layui.table;
$ = layui.jquery;
table.render({
    elem: '#tt' // 选择table元素
    ,url: '{% url 'pvc_tabledata' %}?namespace=' + namespace //将浏览器Local session的namespace传给后端
    ,toolbar: '#toolBar' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print']
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox'}
      ,{field: 'name', title: '名称', sort: true, width: 200}
      ,{field: 'namespace', title: '命名空间', width: 200}
      ,{field: 'status', title: '状态',width: 100}
      ,{field: 'volume_name', title: '卷名称'}
      ,{field: 'capacity', title: '容量',width: 80}
      ,{field: 'access_modes', title: '访问模式', width: 130}
      ,{field: 'storage_class_name', title: '存储类'}
      ,{field: 'labels', title: '标签', templet: labelsFormat}
      ,{field: 'create_time', title: '创建时间', width: 160}
      ,{fixed: 'right', title:'操作', toolbar: '#bar', width:140}
    ]]
    ,id: 'TT'
    , done: function (res, curr,count) { //修改表头样式
            $('layui-table[lay-even]tr:nth-child(even)').css({ 'background-color': '#F0FFFF' });
            $('th').css({ 'background-color':'#F0FFFF', 'color': 'black', 'font-weight': '800', 'font-size': '14px', 'line-height':'10px' });
            }
});
// 格式化输出
function labelsFormat(d) {
    var lables = d.lables;
    var result = "";
    if(lables === null){
        result = "None"
    } else {
        for (k in lables) {
            result += '<span style="border: #B0E0E6 solid 2px;border-radius: 5px">' + k + ": " + lables[k] + '</span><br>'
        }
    }
    return result
}

//搜索框
layui.use('table', function () {
  $(document).on('click','#searchBtn', function () {
      var input_val = $('#pvcName').val();
      //console.log(input_val);
      table.reload('TT', {
          where: {   //设定异步数据接口的额外参数，任意设置 传{key: input_val}
              key: input_val
          },
          page: {
              curr: 1  //重新从第 1 页开始
          }
      });
      $('#pvcName').val(input_val); //将输入的内容回显的输入框中
  })
});

// 行工具事件
table.on('tool(tt)', function(obj){
    var data = obj.data; //obj.data获取当前行数据
    console.log(obj);
    if(obj.event === 'del'){
      layer.confirm('确认要删除吗', {icon: 3, title:'提示'}, function(index){
          var del_name = {'name': data.name, 'namespace': data.namespace}; //获取name
          console.log(del_name);
          var csrf_token = $("[name='csrfmiddlewaretoken']").val(); //获取csrf_token
          var loading = layer.load(0, {
                shade: false,
                time: 3*1000
          });
          $.ajax({
              type: "DELETE",
              url: "{% url 'pvc_tabledata' %}",
              data: del_name,
              headers: {'X-CSRFToken': csrf_token},  // 放到请求头，django也会验证这字段
              success: function (result) {
                  if (result.code === 0) {
                      layer.close(loading);
                      obj.del();  // 临时删除当前页面记录
                      layer.msg(result.msg, {icon: 6,time: 2000})  // icon 6 微笑，time弹出时间，默认3秒，单位毫秒
                  } else {
                      layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                  }
              },
              error: function () {
                  layer.msg("服务端接口异常！")
              }
          });
        layer.close(index); // 关闭layer层
      });
    } else if (obj.event === 'yaml') {
        var name = data.name;
        var namespace = data.namespace;
        layer.open({
            type: 2,
            title: 'YAML',
            area: ['40%', '80%'],
            content: '{% url "editor" %}?res_type=pvc' + '&name=' + name + '&namespace=' + namespace
        })
    }
});

});
</script>
{% endblock %}